$(function () {
  // 使用 ajax 获取 userList.json 数据并渲染到页面
  let res;
  getData();

  // 为按钮添加事件
  $("#add").click(function () {
    // TODO：补充代码，实现功能
    const list = document.querySelectorAll('#leftSelect option:checked');
    changeAccess(true, list);
  });
  $("#addAll").click(function () {
    // TODO：补充代码，实现功能
    const list = document.querySelectorAll('#leftSelect option');
    changeAccess(true, list);
  });
  $("#remove").click(function () {
    // TODO：补充代码，实现功能
    const list = document.querySelectorAll('#rightSelect option:checked');
    changeAccess(false, list);
  });
  $("#removeAll").click(function () {
    // TODO：补充代码，实现功能
    const list = document.querySelectorAll('#rightSelect option');
    changeAccess(false, list);
  });
});

/**
 * 修改权限
 * @param {Object} right 要修改的权限
 * @param {Object} changeList 要修改权限的用户列表
 */
function changeAccess(right, changeList) {
  // TODO：补充代码，实现功能
  changeList.forEach((item) => {
    item.selected = false;
    item.remove();
    if (right) {
      document.querySelector("#rightSelect").appendChild(item);
    } else {
      document.querySelector("#leftSelect").appendChild(item);
    }
  })
  const rightList = document.querySelectorAll('#rightSelect option');
  rightList.forEach((item) => {
    res.forEach((user) => {
      if (user.name === item.value) {
        user.right = true;
      }
    })
  })
  const leftList = document.querySelectorAll('#leftSelect option');
  leftList.forEach((item) => {
    res.forEach((user) => {
      if (user.name === item.value) {
        user.right = false;
      }
    })
  })
  let list = `<tr><td>用户名</td><td>权限</td></tr>`;
  res.forEach((item) => {
    list += `<tr>
    <td>${item.name}</td>
    <td>${item.right ? "管理员" : "普通用户"}</td>
  </tr>`;
  });
  document.querySelector("#userList").innerHTML = list;
}
// 异步获取数据
async function getData() {
  // TODO：补充代码，实现功能
  res = await $.get("./js/userList.json");
  let list = `<tr><td>用户名</td><td>权限</td></tr>`;
  res.forEach((item) => {
    list += `<tr>
    <td>${item.name}</td>
    <td>${item.right ? "管理员" : "普通用户"}</td>
  </tr>`;
  });
  document.querySelector("#userList").innerHTML = list;
}